<template>
	<view>
		<radio-group class="block" @change="RadioChange">
			<view class="cu-list menu margin-top">
				<view class="cu-item" v-if="!isWeiXin" @click="paytype = 'alipay'">
					<view class="content">
						<image src="/static/alipay.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">支付宝支付</text>
					</view>
					<view class="action"><radio color="#9c26b0" :checked="paytype == 'alipay' ? true : false" value="alipay"></radio></view>
				</view>
				<view class="cu-item" @click="paytype = 'wechat'">
					<view class="content">
						<image src="/static/wechat.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">微信支付</text>
					</view>
					<view class="action"><radio color="#9c26b0" :checked="paytype == 'wechat' ? true : false" value="wechat"></radio></view>
				</view>
			</view>
		</radio-group>
		<view class="padding flex flex-direction"><button class="cu-btn bg-mauve margin-tb-sm lg" @click="toPay">立即支付</button></view>
	</view>
</template>

<script>
import { order } from '@/config/mixins.js';
export default {
	mixins: [order],
	props: {
		orderId: {
			type: String,
			default() {
				return '';
			}
		}
	},
	computed: {
		isWeiXin() {
			return this.$common.isWeiXinBrowser();
		}
	},
	data() {
		return {
			paytype: 'wechat'
		};
	},
	methods: {
		RadioChange(e) {
			this.paytype = e.detail.value;
		},
		checkWXJSBridge(data) {
			let that = this;
			let interval = setInterval(() => {
				if (typeof window.WeixinJSBridge != 'undefined') {
					clearTimeout(interval);
					that.onBridgeReady(data);
				}
			}, 200);
		},
		onBridgeReady(data) {
			var _this = this;
			window.WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				{
					appId: data.appId, // 公众号名称，由商户传入
					timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
					nonceStr: data.nonceStr, // 随机串
					package: data.package,
					signType: data.signType, // 微信签名方式：
					paySign: data.paySign // 微信签名
				},
				function(res) {
					if (res.err_msg === 'get_brand_wcpay_request:ok') {
						_this.$common.successToShow('支付成功', () => {
							_this.getOrderDetail('pay');
						});
					} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
						_this.$common.errorToShow('取消支付');
					} else {
						_this.$common.errorToShow('支付失败');
					}
				}
			);
		},
		toPay() {
			let data = {
				method: 'wap',
				paytype: this.paytype,
				order_id: this.orderId,
				token: this.vuex_user.token
			};
			/**
			 * 微信支付有两种
			 * 判断是否在微信浏览器
			 * 	微信jsapi支付
			 */
			if (this.isWeiXin) {
				data.method = 'mp';
				let url = window.location.origin;
				if (window.location.hash != '') {
					url += window.location.pathname + '?hashpath=/pages/auth/auth&order_id=' + this.orderId;
				} else {
					url += window.location.origin + '/pages/auth/auth?order_id=' + this.orderId;
				}
				data.url = url;
				this.$api.order_pay(data).then(res => {
					if (res.code == 1) {
						this.checkWXJSBridge(res.data);
					} else if (res.code == 2) {
						window.location.href = res.data;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			} else {
				// 微信h5支付
				data.method = 'wap';
				let url = window.location.href;
				if (url.indexOf('type=success') == -1) {
					url = `${url}&type=success`;
				}
				data.url = url;
				this.$api.order_pay(data).then(res => {
					if (res.code) {
						//URL地址
						if (res.data.toString().match(/^((?:[a-z]+:)?\/\/)(.*)/i)) {
							location.href = res;
							return;
						}

						//Form表单
						document.getElementsByTagName('body')[0].innerHTML = res.data;
						let form = document.querySelector('form');
						if (form && form.length > 0) {
							form.submit();
							return;
						}

						//Meta跳转
						let meta = document.querySelector('meta[http-equiv="refresh"]');
						if (meta && meta.length > 0) {
							setTimeout(function() {
								location.href = meta.content.split(/;/)[1];
							}, 300);
							return;
						}
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			}
		}
	}
};
</script>

<style></style>
